<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="repairItemPage"
        uniqueId="repairItemTable"
      ></ele-page>
    </div>
    <ele-form-drawer class="dialog-pack"
                     :isLoading="isLoading"
                     v-model="formDataDialog"
                     v-bind="formDescDialog"
                     :request-fn="handleSubmit"
                     :visible.sync="visible"
                     :title="title"
    >
      <template v-slot:repairMaterialName>
        <el-input v-model="formDataDialog.repairMaterialName"
                  readonly
                  :disabled = "formDataDialog.isRepair !== 'Y'"
                  placeholder='请选择物料'>
          <el-button
            v-if="formDataDialog.isBase !== 'Y'"
            :disabled = "formDataDialog.isRepair !== 'Y'"
            slot="append"
            icon="el-icon-search"
            @click="mixinDialogVisible = true"/>
          <el-button
            v-if="formDataDialog.isBase === 'Y'"
            :disabled = "formDataDialog.isRepair !== 'Y'"
            slot="append"
            icon="el-icon-search"
            @click="mixinDialogVisibleJc = true"/>
        </el-input>
      </template>
    </ele-form-drawer>
    <!-- 此组件放到与抽屉平级，理论上不需要修改 -->
    <ele-dialog-table
      title="物料查询"
      width="800px"
      :visible.sync="mixinDialogVisible"
      :formConfig="mixinSearchDialog"
      :column="mixinDialogColumn"
      @getSelectData="getSelectMixin"
      :getList="getMixinList"
      :hasFooter="hasMixinFooter"
    ></ele-dialog-table>
    <ele-dialog-table
      title="物料查询"
      width="800px"
      :visible.sync="mixinDialogVisibleJc"
      :formConfig="mixinSearchDialogJc"
      :column="mixinDialogColumn"
      @getSelectData="getSelectMixin"
      :getList="getMixinListJc"
      :hasFooter="hasMixinFooter"
    ></ele-dialog-table>
  </div>
</template>

<script>
import { operateList, searchConfig, formDescDialogMixin, rowConfig } from './config'

import { mixinDialog } from '@/views/materials/tmMaterialList/ele-dialog-table/mixin'
import {repairItemCreate, repairItemDeleteById, repairItemPage, repairItemUpdate} from "@/api/repair/item";
import {getDict} from "@/api/common";
import dialogRepairTable from '@/views/materials/tmMaterialList/ele-dialog-table/index'
export default {
  name: 'repairItem',
  components: { dialogRepairTable },
  mixins: [ formDescDialogMixin, searchConfig,mixinDialog],
  data() {
    const self = this
    return {
      title: null,
      visible: false,
      isLoading: false,
      loading: false,

      formDataDialog: {},
      // formDescDialog, //新增修改框
      operateList,
      repairItemPage,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: "repairProf",
          label: '工种',
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getDict("work_type")
            return list.data.result;
          },
          showOverflowTooltip: true,
        },
        {
          prop: 'repairCateFir',
          label: '一级分类',
          showOverflowTooltip: true
        },
        {
          prop: 'repairCateSec',
          label: '二级分类',
          showOverflowTooltip: true
        },
        {
          prop: 'repairItem',
          label: '维修项目',
          showOverflowTooltip: true
        },
        {
          prop: 'repairHours',
          label: '工时',
          showOverflowTooltip: true
        },
        {
          prop: 'repairHoursUnitPrice',
          label: '工时单价',
          showOverflowTooltip: true
        },
        {
          prop: 'repairHoursTotalPrice',
          label: '工时总价',
          showOverflowTooltip: true
        },
        {
          prop: 'isBase',
          label: '基础整备项',
          showOverflowTooltip: true,
          render: (h, scope) => {
            const qmiTestStep = { 'Y': '是', 'N': '否' }
            return (
              <span>{qmiTestStep[scope.row.isBase] || ''}</span>
            )
          }
        },
        {
          prop: 'isRepair',
          label: '使用物料',
          showOverflowTooltip: true,
          render: (h, scope) => {
            const qmiTestStep = { 'Y': '是', 'N': '否' }
            return (
              <span>{qmiTestStep[scope.row.isRepair] || ''}</span>
            )
          }
        },
        {
          prop: 'repairMaterialName',
          label: '使用物料名称',
          showOverflowTooltip: true,
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 160,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ]
    }
  },
  computed: {},
  methods: {
    getSelectMixin(data) {
      console.warn(data)
      // 筛选重复值,插入
      this.$set(this.formDataDialog, 'repairMaterialName', data[0].materialName)
      this.$set(this.formDataDialog, 'repairMaterialCode', data[0].materialCode)
      this.$set(this.formDataDialog, 'materialType', data[0].materialType)
    },
    // 表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        add: () => {
          this.formDataDialog = {
            isBase:'N',
            isRepair:'N',
          }
          this.visible = true
        },
        deleteBatch: () => {
          this.$confirm('此操作将删除所选数据及关联明细数据, 是否继续?', $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            const ids = data.rows.map((val) => val.id).join(',')
            this.rowDel(ids)
          })
        },
      }
      fnc[data.handleName]()
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          this.formDataDialog = { ...row }
          this.visible = true
        },
        delete: () => {
          this.$confirm('此操作将删除所选数据及关联明细数据, 是否继续?', $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            this.rowDel(row.id)
          })
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 弹框提交事件
    handleSubmit(data) {

      console.warn(this.formDataDialog.isBase)
      console.warn(this.formDataDialog.isRepair)
      console.warn(this.formDataDialog.materialType)

      if(this.formDataDialog.isBase === 'Y' &&
        this.formDataDialog.isRepair === 'Y' &&
        (this.formDataDialog.materialType !== '集采' && this.formDataDialog.materialType !== '辅料'))
      {
        this.$message.warning("基础整备项只能选择集采/辅料类物料")
        return
      }

      if (this.isLoading) return
      const params = this.formDataDialog.id
        ? {
            title: $i18n.t('common.editSuccess'),
            api: repairItemUpdate,
            data
          }
        : {
            title: $i18n.t('common.addSuccess'),
            api: repairItemCreate,
            data
          }
      console.log(params)
      this.doSubmit(params)
    },
    // 删除
    rowDel(data) {
      this.loading = true
      repairItemDeleteById(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.deleteSuccess'))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    }
  }
}
</script>
